import React, {Component} from 'react';
import {getSecondsShowText} from "../../utils/util";
import {Image, StyleSheet,} from "react-native";
import {Text, View,} from 'react-native-ui-lib'; //eslint-disable-line
import {IconImage} from "../../utils";
import {commonStyles} from "../../configs/commonStyle";
import {isAndroid} from "../../configs/platform";

export default class TimerCountDown extends Component {

    constructor(props) {
        super(props);
        this.state = {
            time: '',
            remain: this.props.time,
            timeTextArr: [['-', '-'], ['-', '-']],
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            remain: nextProps.time
        }, () => {
            this.startTime()
        });

    }

    componentDidMount() {
        this.startTime();
    }

    startTime = () => {
        this.timer && clearInterval(this.timer);
        this.timer = setInterval(() => {
            let count = this.state.remain;
            let time = getSecondsShowText(count);
            let timeTextArr = time.map(item => {
                if (isNaN(item) || typeof item === 'undefined') {
                    item = '--';
                } else {
                    item = `${item}`;
                    if (item.length === 1) {
                        item = `0${item}`;
                    } else if (item.length === 0) {
                        item = '--';
                    }
                }
                return item.split('');
            });
            this.setState({timeTextArr, remain: count - 1}, () => {
                if (count - 1 === 0) {
                    this.props.callBack();
                }
            });
        }, 1000);
    };

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    render() {
        const {timeTextArr} = this.state;
        return (
            <View row centerV>
                <View source={IconImage['img_time_bg']}
                      style={styles.timeItem}>
                    <Text style={styles.timeItemText}>{timeTextArr[0]}</Text>
                </View>
                <Text style={{...commonStyles.text_black_20,marginHorizontal:5}}>:</Text>
                <View source={IconImage['img_time_bg']}
                      style={styles.timeItem}>
                    <Text style={styles.timeItemText}>{timeTextArr[1]}</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    modal: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        height: 200,
    },
    icon: {
        width: 32,
        height: 32,
    },

    modalContent: {
        padding: 22,
        justifyContent: 'center',

        alignItems: 'center',
        borderRadius: 4,
        borderColor: 'rgba(0, 0, 0, 0.1)',
    },
    modalKefuContent: {
        backgroundColor: 'white',
        paddingTop: 10,
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 20,
        borderRadius: 4,
        borderColor: 'rgba(0, 0, 0, 0.1)',
    },
    modalContentTitle: {
        fontSize: 20,
        marginBottom: 12,
        color: 'red',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalButton: {
        marginTop: 10,
        width: '40%',
        marginLeft: '30%',
        marginRight: '30%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    gameName: {
        fontSize: 28,
        color: '#F19308',
        fontWeight: 'bold',
        // fontStyle: 'italic',
        textShadowOffset: {width: 3, height: 3},
        textShadowRadius: 2,
        textShadowColor: '#111',
    },
    timeItem: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(51,51,51,0.7)',
        borderRadius: 4,
        paddingHorizontal: 8,
        paddingVertical:isAndroid()?3: 5
    },
    timeItemText: {
        color: 'white',
        fontSize: 14,
    },
    imageButton: {
        margin: 5,
        height: 100,
        flexDirection: 'column',
    },
    avatarView: {
        width: 60,
        height: 60,
        borderRadius: 30,
        overflow: 'hidden',
        backgroundColor: '#000',
    },
    avatar: {
        width: 60,
        height: 60,
    },
});
